<template>
  <section id="container">
    <myhead></myhead>
    <mymenu ref="mymenu"></mymenu>
    <section v-if="isaddcollection" id="main-content">
      <section class="wrapper">
        <div class="row">
          <div class="col-lg-12 main-chart">
            <div class="border-head mm">
              <h3>采集器
                <button class="btn btn-small btn-theme04 btn-head" v-bind:disabled="isRefreshoo" @click="queryAllconfirm">更新状态</button>
                <button class="btn btn-small btn-theme04 btn-reflash" v-bind:disabled="isRefresh" @click="reflash">刷新</button>
              </h3>
            </div>
          </div>
        </div>
        <div class="row mb">
          <div class="content-panel mypanel">
            <div class="adv-table">
              <div id="hidden-table-info_wrapper" class="dataTables_wrapper form-inline" role="grid">
                <div class="row-fluid">
                  <div class="col-lg-6 mar">
                    <div class="dataTables_filter" id="hidden-table-info_filter">
                      <label>
                        <select class="form-control" v-model.trim="onLineState">
                          <option :value="0" >全部</option>
                          <option :value="1" >在线</option>
                          <option :value="2" >离线</option>
                        </select>
                        <button class="btn btn-success btn-sm" v-bind:disabled="isRefresh" @click="findCollection">查询</button>
                      </label>
                    </div>
                  </div> 
                  <div class="col-lg-6 mar">
                    <button class="btn btn-small btn-theme04 btn-head rightbtn" v-bind:disabled="isRefresh" @click="addcollection(false)">添加</button>
                  </div>
                </div>
                <table  class="display table table-bordered dataTable">
                  <thead>
                    <tr role="row">
                      <th class="sorting_asc">学校</th>
                      <th class="sorting">采集器编号</th>
                      <th class="hidden-phone sorting">IP</th>
                      <th class="hidden-phone sorting">数量</th>
                      <th class="hidden-phone sorting">地址列表</th>
                      <th class="hidden-phone sorting">在线状态</th>
                      <th class="hidden-phone sorting">日期</th>
                    </tr>
                  </thead>
                  <tr class="gradeA odd" v-if="collectionlist==''">
                    <td colspan="9"><div class="noinfo"><p>没有采集器信息!</p></div></td>
                  </tr>
                  <tbody role="alert" aria-live="polite" aria-relevant="all">
                    <template v-for="collection in collectionlist">
                      <tr class="gradeA odd">
                        <td>{{collection.schoolName}}</td>
                        <td>{{collection.collectNumber}}</td>
                        <td>{{collection.ip}}</td>
                        <td>{{collection.allCount}}</td>
                        <td>{{collection.addrList}}</td>

                        <td class="success" v-if="collection.isOnLine==1">在线</td>
                        <td class="danger" v-else>离线</td>
                        <td>{{collection.updateTime}}</td>
                      </tr>
                    </template>
                  </tbody>
                </table>
                <div class="row-fluid">
                  <div class="span6">
                    <div class="dataTables_paginate paging_bootstrap pagination mypagination">
                      <ul>
                        <li class="prev disabled"><button class="btn btn-default" v-bind:disabled="currentPage<=1" @click="previousPage">上一页</button></li>
                        <li class="next"><button class="btn btn-default" v-bind:disabled="currentPage==totalPage" @click="nextPage">下一页</button></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </section>
    <addcollection v-if="!isaddcollection" @isadd="addcollection"></addcollection>
  </section>
</template>

<script>
  import myhead from './myhead.vue'
  import mymenu from './mymenu.vue'
  import addcollection from './addcollection.vue'
  export default {
    name: 'collections',
    data () {
      return {
        collectionlist:[],
        isReflash:false,
        totalPage:0,
        currentPage:0,
        onLineState:0,
        isaddcollection:true,
        isRefresh:false,
        isRefreshoo:false,
      }
    },
    components: {
      myhead,mymenu,addcollection
    },
    mounted () {
      this.collectionInformation({
        currentPage:this.currentPage+1,
        pageSize:20
      })
      this.setMenu()
    },
    methods:{
      queryAllconfirm(){
        var that = this
        $.confirm({
          icon: 'fa fa-spinner fa-spin',
          title: '提示!',
          content: '确认需要发送查询采集器状态指令?',
          confirmButton: '确认',
          cancelButton: '取消',
          confirmButtonClass: 'btn-warning',
          cancelButtonClass: 'btn-success',
          backgroundDismiss: false,
          columnClass: 'col-md-4 col-md-offset-4',
          confirm: function(){
            that.findState()
          },
          cancel: function(){
          }
        })
      },
      reflash(){
        this.isRefresh = true
        this.collectionInformation({
          currentPage:1,
          pageSize:20
        })
        setTimeout(() =>{
            this.isRefresh = false
          },3000);
      },
      setMenu(){
        this.$refs.mymenu.setMenu('collections')
      },
      addcollection:function(msg){
        if(msg === true){
          this.findCollection();
        }
        this.isaddcollection = msg
      },
      findCollection(){
        this.collectionInformation({
          state:this.onLineState,
          currentPage:1,
          pageSize:20
        })
      },
      previousPage(){
        this.collectionInformation({
          state:this.onLineState,
          currentPage:this.currentPage-1,
          pageSize:20
        })
      },
      nextPage(){
        this.collectionInformation({
          state:this.onLineState,
          currentPage:this.currentPage+1,
          pageSize:20
        })
      },
      collectionInformation:function(param){
        var that = this
        var token = sessionStorage.getItem('shiro-token')
        if (!token) {
          that.$router.push({path: '/'})
          return true
        }else{
          var instance = this.$axios.create({
            headers: {'Authorization':token}
          });
          instance.post('ganzi-server/school/collectionInformation',param)
          .then(function (response) {
            if(response.data.code == '200'){
              if(response.data.data && response.data.data.length>0 ){
                that.collectionlist = response.data.data
              }
              that.totalPage = response.data.totalPage
              that.currentPage = response.data.currentPage
            }else{
              that.showToast(response.data.msg)
            }
          })
          .catch(function (error) {
            if(error.response && error.response.data.status == 4001){
              sessionStorage.clear();
              that.$router.push({path: '/'})
            }else if(error.response && error.response.data.status == 4002){
              sessionStorage.clear();
              that.$options.methods.showToast('您的账号在其他地方登录,如非本人操作，请立即修改密码！')
              that.$router.push({path: '/'})
            }else{
              that.$options.methods.showToast('系统异常!')
            }
          });
        }
      },
      findState(){
        var that = this
        var token = sessionStorage.getItem('shiro-token')
        if (!token) {
          that.$router.push({path: '/'})
          return true
        }else{
          that.isRefreshoo = true
          var instance = this.$axios.create({
            headers: {'Authorization':token}
          });
          instance.post('ganzi-server/sendMessageToSchool/queryCollection')
          .then(function (response) {
             if(response.data.code == '200'){
              that.showToast("指令发送成功,请稍后刷新！")
            }else{
              that.showToast(response.data.msg)
            }
          })
          .catch(function (error) {
            if(error.response && error.response.data.status == 4001){
              sessionStorage.clear();
              that.$router.push({path: '/'})
            }else if(error.response && error.response.data.status == 4002){
              sessionStorage.clear();
              that.$options.methods.showToast('您的账号在其他地方登录,如非本人操作，请立即修改密码！')
              that.$router.push({path: '/'})
            }else{
              that.$options.methods.showToast('系统异常!')
            }
          });
          setTimeout(() =>{
            that.isRefreshoo = false
          },10000);
        }
      },
      showToast:function(msg){
        $.alert({
          title: '消息!',
          content: msg,
          confirmButton: '确定',
          confirmButtonClass: 'btn-warning',
          backgroundDismiss: false,
          confirm: function(){
          }
        });
      }
    }
  }
</script>

<style scoped>
  @import "../assets/css/to-do.css";
  @import "../assets/css/school.css";
</style>
